<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件的全局注册和局部注册</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 第三步：使用组件 -->
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>
<br>
  <script>
    // 使用组件的三个步骤
    // 第一步：创建组件构造器 用Vue.extend()   extends 继承
    // 调用创建构造器函数，传入对象，对象中有template 键值对 ，template 代表了自定义组件，显示的是html代码
    const cpnConstructor = Vue.extend({
        template:`    
            <div>
                <h2>这是组件的标题</h2>
                <p>这是组件的内容</p>
                <button>这是组件的按钮</button>
            </div>
        `
    })

    // 第二步：注册组件 Vue.component() 
    // 全局注册
    Vue.component('my-cpn'/* 组件的自定义标签名*/,cpnConstructor /* 组件构造器实例*/)

    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world'
      },
      // 局部注册，局部组件，只有在vue实例范围内起作用，开发的时候尽量用局部组件
      components:{
        // 键值对，key是使用组件自定义标签，value值就是我们的组件构造器实例
        'cpn':cpnConstructor
      }  
    })
  </script>
</body>
</html>